<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
    <meta charset="utf-8">
    <title>Django练习</title>
    <style>
        @import url("//unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css");
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
    <style>
        h1>span{
            font-size: 50%; 
        }
        #l{
            display: inline-block;
            width: 20%;
            height: 400px;
            /* background-color: blue; */
        }
        #r{
            float: right;
            display: inline-block;
            width: 79%;
            height: 400px;
            /* background-color:burlywood; */
        }
    </style>
</head>
<body>
{% verbatim %}
<!-- 上部标题 -->
<div>
    <h1>Django学习 <span>拼搏到无能为力,坚持到感动自己.</span> </h1>
</div>

<div>

    <!-- 左边导航 -->
    <div id=l>
        <div id = "app_listcolleges">
            <h4>学院列表</h4>
        <ul>
            <li v-for="(college,index) in colleges"> 
                    <a href="" v-on:click.prevent="college_click(index)" >{{college.name}}</a>
            </li>

        </ul>    
        </div>	
    </div>

    <!-- 右边内容 -->
    <div id=r>
        <!-- 信息展示(学院,和班级) -->
        <div class="info" id="app_college_info">
            <!-- 学院logo -->
            <div>
				<img :src=college.logo width="160" height="120" alt="">               
            </div>
            <div>
                <!-- 学院名称 -->
                <div>
                    <h4>{{college.name}}</h4>
                </div>
                <!-- 学院简介 -->
                <div>
                    {{college.info}}
                </div>
            </div>

        </div>
        <!-- 班级列表 -->
        <div id="app_class" style="display: '';">
            <ul>
                 
                <li v-for="(data,index) in datas"> 
                    <a href="" v-on:click.prevent="classes_click(data.id)" >{{data.name}}</a>
                </li>
                
            </ul> 

        </div>
        <!-- 学生信息表 -->
        <div id="app_liststudents" style="display: none;">                
        <template>
            <el-table
            :key="Math.random()"
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName">
            <el-table-column prop="id" label="学号" ></el-table-column>
            <el-table-column prop="name" label="姓名" ></el-table-column>
            <el-table-column prop="age" label="年龄" > </el-table-column>
            <el-table-column prop="gender" label="性别" > </el-table-column>
            <el-table-column prop="tel" label="电话" > </el-table-column>
            <el-table-column prop="addr" label="地址" > </el-table-column>    
        </el-table>
        </template>             
        </div>
        <div id="app_page" class="block" style="display: none;">
            <!-- <span class="demonstration">调整每页显示条数</span> -->
            <el-pagination
                background
                layout="sizes, total, prev, pager, next"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="size"			
                :total="count">
            </el-pagination>
        </div>
    </div>
</div>
{% endverbatim %}
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>  
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
<script>
    var size = 5
	// var data = []
	var page = 1
	var count = 8
    var classnum = 0

    function records(){
		var url ='/api/students/?'+'class_m='+classnum+'&page='+page+'&page_size='+size
		$.getJSON(url,(json)=>{			
			count = json.count    
			app_page.count = count
            app_studentslist.tableData = json.results
		})
	}
    var Main = {
        methods: {
        tableRowClassName({row, rowIndex}) {
            if (rowIndex === 1 | rowIndex === 5) {
            return 'warning-row';
            } else if (rowIndex ===3 | rowIndex === 7) {
            return 'success-row';
            }
            return '';
        }
        },        
        data() {
            return {
            tableData: [],
            }
        }
    }
	
	var Main1 = {
		methods: {
		handleSizeChange(val) {
			size = val
			page = 1
			records()           
		},
		handleCurrentChange(val) {
			page = val
			records()
			
		}
		},
		data() {
			return {
				currentPage: page,
				size: size, // 当前页
				count: count,
			};
		}
	}

    var Ctor = Vue.extend(Main)
    app_studentslist = new Ctor().$mount('#app_liststudents')
    var Ctor1 = Vue.extend(Main1)
	app_page = new Ctor1().$mount('#app_page') 
	
    
    const app_clollege_info = new Vue({
		el: '#app_college_info',
		data: {
            college: {},
		},
	})
 
    const app_class = new Vue({
		el: '#app_class',
		data: {
            datas: [],
		},
        methods: {
            classes_click(val){
                classnum = val
                fetch('/api/classes/'+val)
                .then(resp => resp.json())
                .then(json => {
                    app_clollege_info.college = json
                    document.getElementById('app_class').style.display="none"
                    document.getElementById('app_liststudents').style.display=""
                    document.getElementById('app_page').style.display=""
                    records()
                })
            },
        }
	})
	const app_clollege = new Vue({
		el: '#app_listcolleges',
		data: {
            collegecount: 0,
			colleges: [],
		},
		created(){
			fetch('/api/colleges/')
			.then(resp => resp.json())
			.then(json => {
				this.colleges = json.results
                app_clollege_info.college=this.colleges[0]
                app_class.datas = this.colleges[0].classes
			})
		},
        methods: {
            college_click(val){
                // alert(val)
                app_clollege_info.college=this.colleges[val]
                app_class.datas = this.colleges[val].classes
                document.getElementById('app_class').style.display=""
                document.getElementById('app_liststudents').style.display="none"
                document.getElementById('app_page').style.display="none"
            },
        }
	})

</script>
</html>